{%- style -%}
  .brand-{{ section.id }} .adapt-to-image::before {
    padding-bottom: {{ 1 | divided_by: section.settings.desktop_image.aspect_ratio | times: 100 }}%;
    content: '';
    display: block;
    width: 1px;
    margin-left: -1px;
  }
  @media screen and (max-width: 767px) {
    .brand-{{ section.id }} .adapt-to-image::before {
      padding-bottom: {{ 1 | divided_by: section.settings.mobile_image.aspect_ratio | times: 100 }}%;
    }
  }
  {% comment %}桌面端为模块高度设置一个最小值，为图片高度的 2/3 {% endcomment %}
  @media screen and (min-width: 768px) {
    .brand-{{ section.id }} .adapt-to-image {
      min-height: {{ 1920 | divided_by: section.settings.desktop_image.aspect_ratio | times: 2 | divided_by: 3 }}px;
    }
  }
{%- endstyle -%}

<div class="brand-image-overlay-wrap padding-x brand-{{ section.id }}">
  <div class="content w-100 rounded-2 overflow-hidden bg-white">
    <div class="container-topic px-0 position-relative wrapper">
      <div class="absolute-center">
        <div data-time="800" class="img-wrapper h-100 rigid-wrapper">
          <picture>
            <source
              media="(max-width: 767px)"
              sizes="(max-width: 767px) 100vw, 767px"
              srcset="
                {{ section.settings.mobile_image | img_url: '375x' }} 1x,
                {{ section.settings.mobile_image | img_url: '375x', scale: 2 }} 2x,
                {{ section.settings.mobile_image | img_url: '375x', scale: 3 }} 3x
              "
            >
            <img
              class="object-fit-cover rounded-2"
              srcset="
                {%- if section.settings.desktop_image.width >= 1200 -%}{{ section.settings.desktop_image | img_url: '1200x' }} 1200w,{%- endif -%}
                {%- if section.settings.desktop_image.width >= 1920 -%}{{ section.settings.desktop_image | img_url: '1920x' }} 1920w,{%- endif -%}
                {%- if section.settings.desktop_image.width >= 2400 -%}{{ section.settings.desktop_image | img_url: '2400x' }} 2400w,{%- endif -%}
                {%- if section.settings.desktop_image.width >= 3840 -%}{{ section.settings.desktop_image | img_url: '3840x' }} 3840w,{%- endif -%}
              "
              src="{{ section.settings.desktop_image | img_url: '750x' }}"
              loading="lazy"
              alt="{{ section.settings.desktop_image.alt | escape }}"
            >
            {% if section.settings.desktop_image == blank and section.settings.mobile_image == blank %}
              <div class="object-fit-cover img-placeholder h-100">
                {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg h-100 w-100' }}
              </div>
            {% endif %}
          </picture>
        </div>
      </div>
      <div class="position-relative d-flex adapt-to-image">
        <div class="inner-wrap">
          {% if section.settings.title != blank %}
            <h2 data-time="1000" class="mb-0 title text-black letter-spacing-4">{{ section.settings.title }}</h2>
          {% endif %}
          {% if section.settings.button_label != blank %}
            <a
              {% if section.settings.button_link contains 'https://' %}
                target="_blank" rel="nofollow"
              {% endif %}
              href="{{ section.settings.button_link }}"
              data-time="1500"
              class="btn btn-link text-nowrap learn-more-btn with-stretched-link fw-normal text-black"
            >
              {{ section.settings.button_label }}
            </a>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Image text with overlay",
  "tag": "section",
  "class": "as-brand-image-wrap",
  "settings": [
    {
      "type": "header",
      "content": "IMAGE"
    },
    {
      "label": "Desktop image",
      "type": "image_picker",
      "id": "desktop_image"
    },
    {
      "label": "Mobile image",
      "type": "image_picker",
      "id": "mobile_image"
    },
    {
      "type": "header",
      "content": "CONTENT"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Headline"
    },
    {
      "type": "text",
      "id": "description",
      "label": "Description"
    },
    {
      "type": "header",
      "content": "BUTTON"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button label"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button link"
    }
  ]
}
{% endschema %}
